static<template>
	<view class="zhuce_container">
		<uni-icons class="fanhui" color=white type="arrowleft" size="25" @click="back"></uni-icons>
		<view class="zhuce_box">
			<view class="avatar_box">
				<image :src="require('../../static/logo.jpg')" class="img">
			</view>
			<view :model="zhuceform" class="zhuce_form">
				<view class="zhanghaoform">
					<input class="zhanghao" placeholder="请输入账号" style="font-size: 28rpx" v-model="zhuceform.zhanghao" @blur="isdisabled"></input>
					<label>账号：</label>
				</view>
				<view class="mimaform">
					<input class="mima" placeholder="请输入密码" style="font-size: 28rpx" v-model="zhuceform.mima" type="password"
						@blur="isdisabled"></input>
					<label>密码：</label>
				</view>
				<view class="querenmimaform">
					<input class="querenmima" placeholder="再次输入密码" style="font-size: 28rpx" v-model="zhuceform.querenmima" type="password" @blur="isdisabled"></input>
					<label>确认密码：</label>
				</view>
				<view class="youxiangform">
					<input class="youxiang" placeholder="找回密码邮箱" style="font-size: 28rpx" v-model="zhuceform.youxiang" @blur="isdisabled"></input>
					<label>邮箱：</label>
				</view>
				<view class="nianlingform">
					<input class="nianling" placeholder="请输入年龄" style="font-size: 28rpx" v-model="zhuceform.nianling" @blur="isdisabled"></input>
					<label>年龄：</label>
				</view>
				<button :class="{ finish: zhuceform.isfinish, nofinish: zhuceform.nofinish }" round v-bind:disabled="zhuceform.isable" @click="register">注册</button>
			</view>
			<view class="xingbieradio">
				<radio-group>
					<label>性别：</label>
					<radio class="nan" value="nan" @click="xiugaixingbie('男')"/><text class="nan">男</text>
					<radio class="nv" value="nv" @click="xiugaixingbie('女')"/><text class="nv">女</text>
				</radio-group>
			</view>
		</view>
	</view>
</template>


<script>
	export default {
		data() {
			return {
				zhuceform: {
					isfinish: false,
					nofinish: true,
					isable: true,
					zhanghao: "",
					mima: "",
					querenmima: "",
					youxiang: "",
					xingbie:"",
					nianling: ""
				}
			}
		},
		methods: {
			//注册账号
			register() {
				uni.request({
					url: this.baseurl + "/register",
					method: 'POST',
					header: {
						'content-type': "application/x-www-form-urlencoded",
					},
					data: {
						userId: this.zhuceform.zhanghao,
						userName: this.zhuceform.youxiang,
						password: this.zhuceform.mima,
						gender: this.zhuceform.gender,
						age: parseInt(this.zhuceform.nianling),
					},
					success: (res) => {
						console.log(res)
						if (res.data.code === 200) {
							uni.showToast({
								title: "注册成功",
								icon: 'none',
								duration: 2000,
							});
							setTimeout(() => {
								uni.navigateTo({
									url:'./login'
								});
							}, 1000);
						}
					}
				})
			},
			xiugaixingbie(e)
			{
				this.zhuceform.xingbie=e;
			},
			back()
			{
				uni.navigateBack({
				})
			},
			isdisabled() {
				var a1 = this.zhuceform.zhanghao;
				var a2 = this.zhuceform.mima;
				var a3 = this.zhuceform.querenmima;
				var a4 = this.zhuceform.youxiang;
				var a5 = this.zhuceform.xingbie;
				var a6 = this.zhuceform.nianling;
				if (a1 !== "" && a2 !== "" && a3 !== "" && a4 !== "" && a5 !== "" && a6 !== "") {
					this.zhuceform.isable = false;
					this.zhuceform.isfinish = true;
					this.zhuceform.nofinish = false;
				} else {
					this.zhuceform.isable = true;
					this.zhuceform.isfinish = false;
					this.zhuceform.nofinish = true;
				}
				if (a3 !== "" && a2 !== a3) {
					alert("两次输入密码不一致，请重新输入！")
					this.zhuceform.mima = "";
					this.zhuceform.querenmima = "";
					this.zhuceform.isable = true;
					this.zhuceform.isfinish = false;
					this.zhuceform.nofinish = true;
				}
			},
		}
	}
</script>

<style scoped>
	.zhuce_container {
		background-color: #c0e9ff;
		height: 100vh;
		width: 100vw;
	}
	
	.zhuce_box {
		width: 80vw;
		height: 60vh;
		background-color: #ffffff;
		border-radius: 10%;
		position: relative;
		left: 10vw;
		top: 27vh;
	}

	.avatar_box {
		height: 300rpx;
		width: 300rpx;
		border: 1px solid #eee;
		border-radius: 50%;
		padding: 5%;
		box-shadow: 0 0 10px rgb(12, 166, 255);
		position: relative;
		left: 19vw;
		top: -350rpx;
	}
	
	.img {
		width: 240rpx;
		height: 240rpx;
		border-radius: 50%;
		position: relative;
		left: -2rpx;
		top:-2rpx;
	}
	
	.zhuce_form {
		width: 100vw;
		height: 100%;
		position: relative;
		width: 100%;
		top: -19vh;
		box-sizing: border-box;
	}
	.zhanghaoform {
		cursor: pointer;
		position: relative;
		top: 8vh;
		left:14.5vw;
	}
	.zhanghao {
		height: 4vh;
		width: 45vw;
		float: right;
		border: 2px solid #eee;
		border-radius: 10rpx;
		position: relative;
		left:-22vw;
		top:-0.5vh;
	}
	.mimaform {
		cursor: pointer;
		position: relative;
		top: 12.5vh;
		left:14.5vw;
	}
	.mima {
		height: 4vh;
		width: 45vw;
		float: right;
		border: 2px solid #eee;
		border-radius: 10rpx;
		position: relative;
		top:-2vh;
		left:-22vw;
	}
	.querenmimaform {
		cursor: pointer;
		position: relative;
		top: 16.5vh;
		left:6vw;
	}
	.querenmima {
		height: 4vh;
		width: 45vw;
		float: right;
		border: 2px solid #eee;
		border-radius: 10rpx;
		position: relative;
		top:-3.5vh;
		left:-13.5vw;
	}
	.youxiangform {
		cursor: pointer;
		position: relative;
		top: 20.5vh;
		left:14.5vw;
	}
	.youxiang {
		height: 4vh;
		width: 45vw;
		float: right;
		border: 2px solid #eee;
		border-radius: 10rpx;
		position: relative;
		top:-4.8vh;
		left:-22vw;
	}
	.xingbieradio
	{
		cursor: pointer;
		position: relative;
		top: -45vh;
		left:14.5vw;
		
	}
	.nan
	{
		transform:scale(0.7);
		position: relative;
		left:1vw;
	}
	.nv
	{
		transform:scale(0.7);
		position: relative;
		left:15vw;
	}
	.nianlingform
	{
		cursor: pointer;
		position: relative;
		top: 29vh;
		left:14.5vw;
	}
	.nianling {
		height: 4vh;
		width: 45vw;
		float: right;
		border: 2px solid #eee;
		border-radius: 10rpx;
		position: relative;
		left:-22vw;
		top:-6.25vh;
	}
	.nofinish {
		width: 50vw;
		height: 5vh;
		font-size: 20px;
		display: flex;
		align-items: center;
		justify-content: center;
		border: 2rpx solid #bebebe;
		border-radius: 50rpx;
		position: relative;
		top:30vh;
	}

	.finish {
		width: 50vw;
		height: 5vh;
		font-size: 22px;
		color: white;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 50rpx;
		background-color: #20b0ff;
		position: relative;
		top:30vh;
	}
	.fanhui
	{
		position: relative;
		top:4vh;
		left:4vw;
	}
</style>
